<template>
  <a-row :gutter="24" >
      <a-col :md="4" :sm="24">
         <a-card :bordered="false">
           <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              房產
            </div>
          <div
            class="demo-infinite-container"
            :infinite-scroll-disabled="busy"
            :infinite-scroll-distance="10"
          >
            <a-list :data-source="data" class="scrll" :split="false">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta >
                  <a slot="title" @click="selected(item)">
                   <a-card :bordered="false" class="llld" :class="{active: activeName == item}">
                     <p class="msi" :class="{fontActive: activeName == item}">測試房產</p>
                     <p class="msi">1/3</p>
                   </a-card>
                  </a>
                </a-list-item-meta>
              </a-list-item>
              <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
              </div>
            </a-list>
          </div>
          <div class="foot-h">
              <a-button type="primary" icon="plus">
                添加房產
              </a-button>
              <a-button  >
                導出
              </a-button>
          </div>
         </a-card>
      </a-col>
      <a-col :md="20" :sm="24">
         <a-card :bordered="false">
           <a-row>
              <a-col :span="10">
                <a-list item-layout="horizontal">
                  <a-list-item >
                    <span  class="name-home">
                      <a-icon type="bank" style="margin-right: 8px;font-size:30px" />
                      <span style="font-size:30px">1聯和大樓</span>  <a-button class="name-home-update name-home-button" type="dashed">修改</a-button><a-button class="name-home-del name-home-button" type="dashed">刪除</a-button>
                      <a-row :gutter="24" class="name-home-button name-home-item2">
                        <a-col :md="8" :sm="24"><span class="name-home-button">負責人：ddd</span></a-col>
                        <a-col :md="8" :sm="24"><span class="name-home-button name-home-button-text">電話：13566565589</span></a-col>
                        <a-col :md="8" :sm="24"></a-col>
                      </a-row>
                      <a-row :gutter="24" class="name-home-button name-home-item2">
                        <a-col :md="8" :sm="24"><span class="name-home-button">闲置率：<span class="number-item">62.50% </span></span></a-col>
                        <a-col :md="8" :sm="24"><span class="name-home-button-text">总租金：<span class="number-item">48732.00</span></span></a-col>
                        <a-col :md="8" :sm="24"><span class="name-home-button-text">总押金：<span class="number-item">28310.00</span></span></a-col>
                      </a-row>
                    </span>
                  </a-list-item>
                </a-list>
              </a-col>
              <a-col :span="14"><a-form layout="inline">
                      <a-row :gutter="48">
                        <a-col :md="6" :sm="24">
                          <a-form-item  >
                           <a-button class="name-home-update name-home-button" type="dashed">添加房間</a-button>
                          </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                          <a-form-item >
                           <a-button class="name-home-del name-home-button" type="dashed">添加樓層</a-button>
                          </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                          <a-form-item >
                            <a-input  placeholder="请输入房間名"/>
                          </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                        </a-col>
                      </a-row>
                    </a-form>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-list item-layout="horizontal">
                  <a-list-item >
                    <span :key="type" class="name-home">
                      <a-row :gutter="24" class="name-home-button name-home-item2">
                        <a-col :md="24" :sm="24">
                          <span class="name-home-button">
                            狀態：<span class="zt ">全部（<span>29</span>）</span>
                            <a-divider type="vertical" class="divider-only-s"/>閑置（<span>29</span>） 已租（<span>29</span>）
                            <a-divider type="vertical" class="divider-only-s"/><a-badge color="#ff9900"/> 預定
                            <a-divider type="vertical" class="divider-only-s"/>
                            <a-badge color="green"/> 收租（<span>9</span>）
                            <a-badge color="#f50"/> 逾期（<span>1</span>）
                            <a-badge color="#87d068"/> 無賬單
                            <a-divider type="vertical" class="divider-only-s"/><a-badge color="rgb(219, 19, 176)"  />租約到期（<span>1</span>）
                          </span>
                        </a-col>
                        <a-col :md="24" :sm="24">
                          <span class="name-home-button">
                            戶型：<span class="zt ">全部</span>
                          </span>
                        </a-col>
                      </a-row>
                    </span>
                  </a-list-item>
                </a-list>
              </a-col>
            </a-row>
            <a-divider/>
             <div class="divider-content-only divider-content-center-only">
              <a-divider type="vertical" class="divider-only"/>
              一樓<a-button class="name-home-del name-home-button" type="dashed">刪除</a-button>
              <a-row :gutter="24" >
                <a-col :md="4" :sm="24" style="padding-top:8px">
                  <a-card  :bordered="false" class="item-home-card">
                    <p class="item-home-card-p">A101</p>
                    <p class="item-home-card-p">兩房一廳一衛<a-tag color="#ff9900" style="float: right;">預定</a-tag></p>
                    <p class="item-home-card-p">張勝男</p>
                  </a-card>
                </a-col>
                <a-col :md="4" :sm="24" style="padding-top:8px">
                  <a-card  :bordered="false" class="item-home-card">
                    <p class="item-home-card-p">A102</p>
                    <p class="item-home-card-p">兩房一廳一衛</p>
                    <p class="item-home-card-p">裏依然<a-tag color="#f50" style="float: right;">逾期</a-tag></p>
                  </a-card>
                </a-col>
              </a-row>
            </div>
         </a-card>
      </a-col>
  </a-row>
</template>
<script>
  export default {
    data () {
      return {
        data: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
        loading: false,
        busy: false,
        activeName: ''
      }
    },
    computed: {
    },
    created () {
    },
    methods: {
      selected: function(gameName) {
        this.activeName = gameName
      }
    }
  }
</script>
<style lang="less">
  .msi{
    padding: 0px;
    margin-bottom: 3px;
  }
  .active{
    background-color: rgb(240, 233, 233);
  }
  .fontActive{
    color: rgb(53, 145, 231);
  }
  .llld .ant-card-body{
    padding: 5px 20px;
    border-radius: 5px;
  }
  .ant-list-item{
    padding: 0px;
  }
  .item-home-card-p{
    padding: 0px;
    margin: 4px;
    color: rgb(252, 246, 246);
  }
  .item-home-card .ant-card-body{
    background-color: #4a86e8;
    padding: 5px;
    border-radius: 5px;
  }
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .divider-only{
    background-color: rgb(67, 136, 212);
    width: 5px;
    height: 1.9em;
  }
  .divce{
    border-top: solid 1px #ccc;
    padding-top: 5px;
  }
   .divider-only-s{
    background-color: rgb(67, 136, 212);
    width: 2px;
    height: 1.9em;
  }
  .divider-content-only{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .zt{
    margin-left: 20px;
  }
  .divider-content-center-only{
      margin-top: 10px;
  }
  .scrll{
    height: 800px;
    overflow-y:scroll;
  }
  .scrll::-webkit-scrollbar {
  width: 8px;
  }
 .scrll::-webkit-scrollbar-track {
 background-color:rgb(250, 241, 241);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .scrll::-webkit-scrollbar-thumb {
 background-color:rgb(205, 209, 205);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.foot-h{
  border-top: solid 1px #ccc;
  padding: 15px 20px;
}
.name-home{
  width: 100%;
}
.name-home-button{
  margin-left: 10px;
  font-size: 15px;
}
.name-home-item2{
  margin-top: 10px;
}
.name-home-update{
  color: rgb(70, 164, 218);
}
.name-home-del{
  color:red;
}
.name-home-button-text{
  margin-left: 55px;
}
.number-item{
  color: #000;
}
</style>
